<template>
	<view>
		<view class="" style="margin-top: 50rpx;">
			<button type="default" open-type="chooseAvatar" @chooseavatar="chooseavatar">
				<image :src="avatarUrl" class="avatar"></image>
			</button>
		</view>

		<view class="" style="margin-top: 50rpx; display: flex; flex-direction: row; width: 100%;">
			<view class="title" style="width: 120rpx; margin-left: 50rpx; text-align: center;">昵称</view>
			<input class="uni-input" type='nickname' placeholder="请输入昵称" @blur="getnickname" />
		</view>

		<view class="" style="padding: 20rpx; margin-top: 500rpx;">
			<button type="primary" @click="submit">提交</button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl: '',
				name: '',
			}
		},
		methods: {
			chooseavatar(e) {
				console.log(e);
				let _this = this;
				// this.avatarUrl = e.detail.avatarUrl;
				uni.uploadFile({
					url: _this.$api.upload.file,
					filePath: e.detail.avatarUrl,
					name: 'file',
					success(response) {
						_this.avatarUrl = JSON.parse(response.data).data.url;
					}
				});
			},
			getnickname(e) {
				console.log(e.detail.value);
				this.name = e.detail.value;
			},
			submit() {
				this.$request({
					url: this.$api.user.edit,
					method: 'get',
					data: {
						avatar: this.avatarUrl,
						nickname: this.name,
					}
				}).then(response => {
					uni.navigateBack();
				}).catch(e => {

				});
			},
		},
		onLoad() {
			this.$request({
				url: this.$api.user.user_info,
			}).then(response => {
				if (response.code === 0) {
					this.avatarUrl = response.data.avatar;
				}
			})
		}
	}
</script>

<style>
	.avatar {
		width: 200rpx;
		height: 200rpx;
	}
</style>
